<template>
	<view class="page-body" :style="'height:'+height+'px'">
		<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
			<view class="nav-left-item" @click="categoryClickMain(index)" :key="index" :class="index==categoryActive?'active':''"
				v-for="(item,index) in classifyData">
				{{item.industry_name.length>5?item.industry_name.slice(0,5):item.industry_name}}
			</view>
		</scroll-view>
		<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" :style="'height:'+height+'px'" scroll-with-animation>
			<view class="box">
				<view  class="nav-right-item" v-for="(item,i) in classifyData[categoryActive].chain" :key="i" @click="cart(item)">
					<image class="image" v-if="item.thumb" :src="item.thumb" />
					<image class="image" v-else src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/7/2021/07/2.png" mode=""></image>	
					<view>{{item.chain_name}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { GetIndustryChain,myIndustrychain } from '../../utils/api.js'
	export default {
		data() {
			return {
				name: "wkiwi",
				height: 350,
				categoryActive: 0,
				scrollTop: 0, 
				scrollLeftTop: 0,
				// scrollHeight: 0,
				classifyData:[],
				arr:[0,584,1168,1752,2336,2805,3274,3858,4442,4911,5380,5734,6203,6672,7017],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight:0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight:0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
				chain:{}
			}
		},
		created(){
			//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
			this.getList()
		},
		onLoad: function () {
			// this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
		},
		onReady() {
			// this.getHeightList();
		},
		beforeDestroy(){
			
		},
		methods: {
			getList(){
				GetIndustryChain().then(res=>{
					res.data.unshift({industry_name:'不限',chain:[{chain_name:'全产业链',id:'',chain_id:''}]})
					this.classifyData = res.data
				})
			},
			categoryClickMain(index) {
				uni.showToast({
					title: this.classifyData[index].industry_name,
					icon: "none",
				})
				this.categoryActive = index;
			},
			cart(item) {
				this.chain = item
				this.$emit('changeChain',this.chain)
			}
		},
		components: {
		}
	}
</script>

<style>
	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 25%;
		background: #fafafa;
	}

	.nav-left-item {
		height: 100upx;
		border-right: solid 1px #f1f1f1;
		border-bottom: solid 1px #f1f1f1;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.nav-left-item:last-child{
		border-bottom: none;
	}
	.nav-right {
		width: 75%;
	}
	.box {
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
		/* width: 100%; */
		/* min-height: 100vh; */ 
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}
	.box:last-child {
		border: none;
		/* min-height:100vh; */
	}
	.nav-right-item {
		width: calc(33.3% - 22upx);
		height: 220upx;
		float: left;
		text-align: center;
		padding: 11upx;
		font-size: 28upx;
		background: #fff;
	}

	.nav-right-item .image {
		width: 100upx;
		height: 100upx;
	}

	.active {
		color: #FF9933;
		background: #fff;
		border-right: 0;
	}
	::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
   width: 0;
   height: 0;
   color: transparent;
}
</style>
